<template>
  <div class="favorites-container">
    <div class="favorites-header">
      <h2>我的收藏</h2>
      <div class="header-actions">
        <el-input
          v-model="searchQuery"
          placeholder="搜索收藏的商品"
          prefix-icon="Search"
          clearable
          class="search-input"
        />
        <el-radio-group v-model="viewMode" size="small">
          <el-radio-button label="grid">
            <el-icon><Grid /></el-icon>
          </el-radio-button>
          <el-radio-button label="list">
            <el-icon><List /></el-icon>
          </el-radio-button>
        </el-radio-group>
      </div>
    </div>

    <!-- 网格视图 -->
    <div v-if="viewMode === 'grid'" class="favorites-grid">
      <el-row :gutter="20">
        <el-col 
          :span="6" 
          v-for="item in filteredFavorites" 
          :key="item.id"
        >
          <div class="favorite-card">
            <div class="favorite-image">
              <img :src="item.image" :alt="item.name">
              <div class="image-overlay">
                <el-button type="primary" circle @click="addToCart(item)">
                  <el-icon><ShoppingCart /></el-icon>
                </el-button>
                <el-button type="danger" circle @click="removeFavorite(item)">
                  <el-icon><Delete /></el-icon>
                </el-button>
              </div>
            </div>
            <div class="favorite-content">
              <h3>{{ item.name }}</h3>
              <div class="favorite-meta">
                <span class="brand">{{ item.brand }}</span>
                <span class="collect-time">{{ formatTime(item.collectTime) }}</span>
              </div>
              <div class="favorite-footer">
                <span class="price">¥{{ item.price.toFixed(2) }}</span>
                <el-tag size="small" :type="item.stock > 0 ? 'success' : 'danger'">
                  {{ item.stock > 0 ? '有货' : '无货' }}
                </el-tag>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 列表视图 -->
    <div v-else class="favorites-list">
      <el-table :data="filteredFavorites" style="width: 100%">
        <el-table-column label="商品信息" min-width="400">
          <template #default="{ row }">
            <div class="product-info-cell">
              <img :src="row.image" :alt="row.name" class="product-image">
              <div class="product-details">
                <h4>{{ row.name }}</h4>
                <p class="brand">{{ row.brand }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column label="价格" width="120">
          <template #default="{ row }">
            <span class="price">¥{{ row.price.toFixed(2) }}</span>
          </template>
        </el-table-column>
        
        <el-table-column label="库存状态" width="120">
          <template #default="{ row }">
            <el-tag :type="row.stock > 0 ? 'success' : 'danger'" size="small">
              {{ row.stock > 0 ? '有货' : '无货' }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column label="收藏时间" width="180">
          <template #default="{ row }">
            {{ formatTime(row.collectTime) }}
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="addToCart(row)">
              加入购物车
            </el-button>
            <el-button type="danger" size="small" @click="removeFavorite(row)">
              取消收藏
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Grid, List, ShoppingCart, Delete } from '@element-plus/icons-vue'
import dayjs from 'dayjs'

const viewMode = ref('grid')
const searchQuery = ref('')

// 模拟收藏数据
const favorites = ref([
  {
    id: 1,
    name: '乐事薯片',
    price: 9.90,
    image: 'https://via.placeholder.com/200',
    brand: '乐事',
    stock: 100,
    collectTime: new Date().toISOString(),
  },
  // ... 更多收藏数据
])

const filteredFavorites = computed(() => {
  if (!searchQuery.value) return favorites.value
  const query = searchQuery.value.toLowerCase()
  return favorites.value.filter(item => 
    item.name.toLowerCase().includes(query) || 
    item.brand.toLowerCase().includes(query)
  )
})

const formatTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm')
}

const addToCart = (item) => {
  // 添加到购物车的逻辑
  ElMessage.success('已添加到购物车')
}

const removeFavorite = (item) => {
  ElMessageBox.confirm(
    '确定要取消收藏该商品吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 从收藏列表中移除
    const index = favorites.value.findIndex(f => f.id === item.id)
    if (index > -1) {
      favorites.value.splice(index, 1)
      ElMessage.success('已取消收藏')
    }
  })
}
</script>

<style scoped>
.favorites-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.favorites-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.favorites-header h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.header-actions {
  display: flex;
  gap: 20px;
  align-items: center;
}

.search-input {
  width: 300px;
}

.favorite-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  transition: all 0.3s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.favorite-card:hover {
  transform: translateY(-5px);
}

.favorite-image {
  position: relative;
  height: 200px;
}

.favorite-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  opacity: 0;
  transition: opacity 0.3s;
}

.favorite-card:hover .image-overlay {
  opacity: 1;
}

.favorite-content {
  padding: 15px;
}

.favorite-content h3 {
  margin: 0 0 10px;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favorite-meta {
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 12px;
  margin-bottom: 10px;
}

.favorite-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  color: #ff6b6b;
  font-size: 18px;
  font-weight: bold;
}

.product-info-cell {
  display: flex;
  align-items: center;
  gap: 15px;
}

.product-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.product-details h4 {
  margin: 0 0 5px;
  font-size: 14px;
}

.brand {
  color: #666;
  font-size: 12px;
}

@media (max-width: 768px) {
  .header-actions {
    flex-direction: column;
    gap: 10px;
  }
  
  .search-input {
    width: 100%;
  }
}
</style> 